<template>
	<view class="">
		<login v-if="is_login" v-on:x="no_login" v-on:plogin="to_login"></login>
		<view class="nei">
			<view class="title">{{info.title}}</view>
			<view class="userinfo">
				<view class="userinfo_img">
					<image :src="info.avatar"></image>
				</view>
				<view class="user_info">
					<view class="username">{{info.nick_name}}</view>
					<view class="user_time">{{info._update_time}}</view>
				</view>
			</view>
			<!-- 文章内容 -->
			
			<view class="content" >
				 <video style="width: 100%;"  v-if="info.art_type==1" :src="info.video_url" play-strategy="0" codec="ffmpeg"></video>
				 <!-- <video style="width: 100%;height: 100px;"  v-if="info.art_type==1" src="https://wechat-pictures-1301970825.file.myqcloud.com/123123123.mp4" play-strategy="0" codec="ffmpeg"></video> -->
				 <view class="title" v-if="info.art_type==1">视频介绍</view>
				 <u-parse :content="info.content" @preview="preview" @navigate="navigate" ></u-parse>
			</view>
			 

			 <view class="pinlun" v-for="(item,index) in pinlun_list">
				 <view class="pl_user_info">
					 <view class="pl_user_img">
						 <image :src="item.user_avatar"></image>
						 {{item.user_name?item.user_name:"游客"}}
					 </view>
					 <view class="pl_dianzan" @click="pl_dianzan(item.id,index)">
						 <text>{{item.zan_num}}</text>
						 <uni-icons :color="item.is_zan==1?'#EF3A23':'#666666'" size="20" class="pl_dz" type="hand-thumbsup" ></uni-icons>
					 </view>
				 </view>
				 <view class="pl_content">
					 <view class="contents">
						 {{item.content}}
					 </view>
					 <view class="time">{{item._update_time}}</view>
				 </view>
			 </view>
			 <!-- 点赞转发 -->
			 <view class="button" v-if="is_tap">
				 <view class="input">
					 <uni-icons color="#666666" class="xie" type="compose" ></uni-icons>
					 
					 <input placeholder="写评论" v-model="value" @confirm="send">
				 </view>
				 <view class="set_button">
					 <view class="shoucang" @click="shoucang">
<!-- 						 <image v-if="info.is_collect==1" src="https://wechat-pictures-1301970825.file.myqcloud.com/shoucang.png" mode="widthFix"></image>
						 <image v-if="info.is_collect!=1" src="https://wechat-pictures-1301970825.file.myqcloud.com/tuanzhu-.png" mode="widthFix"></image> -->
						 <uni-icons :color="info.is_collect==1?'#EF3A23':'#666666'" size="30" type="star" ></uni-icons>
						 
					 </view>
					 <view class="dianzan" @click="dianzan">
						 <image v-if="info.is_zan!=1" src="https://wechat-pictures-1301970825.file.myqcloud.com/dianzan.png" mode="widthFix"></image>
						 <image v-if="info.is_zan==1" src="https://wechat-pictures-1301970825.file.myqcloud.com/dianzan-.png" mode="widthFix"></image>
						 
						 <!-- <uni-icons :color="info.is_zan==1?'#EF3A23':'#666666'" size="30" type="hand-thumbsup" ></uni-icons> -->
					 </view>
					 <view class="fenxiang" >
						 <button open-type="share" >
							 <image src="https://wechat-pictures-1301970825.file.myqcloud.com/zhuanfa.png" mode="widthFix"></image>
							 <!-- <uni-icons color="#666666" size="30" type="redo" ></uni-icons> -->
						 </button>
						 
						 
					 </view>
				 </view>
			 </view>
			 <view style="width: 100%;height: 200upx;"></view>
		</view>
        
	</view>
</template>

<script>
	import uParse from '@/components/gaoyia-parse/parse.vue'
	export default {
  components: {
    uParse
  },
		data() {
			return {
				userInfo: {},
				id: "",
				info:{},
				formData:{
					article_id:"",
					page:1,
					limit:10
				},
				pinlun_list:[],
				value:"",
				article: '',
				is_login:false,
				is_tap:true
			}
		},
		onLoad(option) {
			this.id = option.id;
			this.is_login=uni.getStorageSync("token")?false:true
			this.get_info(option.id);
		},
		onShow() {
			this.is_login=uni.getStorageSync("token")?false:true
			this.is_tap=uni.getStorageSync("token")?true:false
			this.pinlun_list=[];
			this.formData.page=1
			this.get_pinlun();
			this.is_login=uni.getStorageSync("token")?false:true
		},
		onShareAppMessage(res) {
		    if (res.from === 'button') {// 来自页面内分享按钮
		      console.log(res.target)
		    }
			this.to_dianzan(this.info.id)
		    return {
		      title:this.info.title,
		      path: '/pages/article/index?id='+this.info.id
		    }
		  },
		onReachBottom(){
		 this.formData.page=this.formData.page+1;
		 this.get_pinlun()
		},
		methods: {
			to_login(){
			   this.is_login=false;
				   this.get_info(this.id)
				   this.get_pinlun()
				   this.is_tap=true
			},
			no_login(){
				this.is_login=false;
				this.is_tap=false
			},
			get_info(id) {
				var data = {
					article_id: id
				}
                uni.showLoading({})
				var _this = this;
				_this.$api.doRequest("post", 'api/art_detail', data).then(res => {
					console.log(res)
                    if(res.code == 200) {
                        uni.hideLoading({})
                    }
					_this.info=res.data.data;
					_this.info.video_url= encodeURI(_this.info.video_url)
					uni.setNavigationBarTitle({
					　　title:res.data.data.art_type==1?'视频详情':'文章详情'
					})
				})
			},
			shoucang(){
				var data={
					article_id:this.id
				}
				var _this=this;
				var url=_this.info.is_collect==1?'api/art_cancel_collect':'api/art_collect';
				_this.$api.doRequest("post",url,data).then(res=>{
					if(res.data.code==200){
						_this.info.is_collect=_this.info.is_collect==1?0:1;
					}
				})
			},
			dianzan(){
				var data={
					article_id:this.id
				}
				var _this=this;
				var url=_this.info.is_zan==1?'api/art_cancel_dianzan':'api/art_dianzan';
				_this.$api.doRequest("post",url,data).then(res=>{
					if(res.data.code==200){
						_this.info.is_zan=_this.info.is_zan==1?0:1;
					}
				})
			},
			send(){
				var data={
					article_id:this.id,
					content:this.value
				}
				var _this=this;
				_this.$api.doRequest("post","api/art_add_comment",data).then(res=>{
					if(res.data.code==200){
						uni.showToast({
							title:res.data.msg,
						})
						_this.value="";
						_this.pinlun_list=[];
						_this.formData.page=1;
						_this.get_pinlun()
					}
				})
			},
			get_pinlun(){
				var data=this.formData;
				data.article_id=this.id;
				var _this=this;
				
				_this.$api.doRequest("post","api/art_comment_list",data).then(res=>{
					var list=_this.pinlun_list
					// console.log(res.data.data.list)
					list=list.concat(res.data.data.list)
					_this.pinlun_list=list
					console.log(_this.pinlun_list);
				})
			},
			pl_dianzan(id,index){
				var data={
					comment_id:id
				}
				var _this=this;
				var url=this.pinlun_list[index].is_zan==1?'api/art_comment_cancel_dianzan':"api/art_comment_dianzan"
				_this.$api.doRequest("post",url,data).then(res=>{
					if(res.data.code==200){
						_this.pinlun_list[index].is_zan=_this.pinlun_list[index].is_zan==1?0:1;
						_this.pinlun_list[index].zan_num=_this.pinlun_list[index].is_zan==1?_this.pinlun_list[index].zan_num+1:_this.pinlun_list[index].zan_num-1;
					}
				})
			},
			to_dianzan(id){
				var data={
					article_id:id
				}
				this.$api.doRequest("post","api/art_share",data).then(res=>{
					
				})
			}
		},
	}
</script>

<style>
	@import url("/components/gaoyia-parse/parse.css");
	.pl_content{
		width: 100%;
		padding-left: 76upx;
		margin-bottom: 54upx;
	}
	.set_button image{
		width: 50upx;
		height: 50upx;
	}
	.pl_content .contents{
		font-size: 28upx;
		color: #333333;
		line-height: 40upx;
	}
	.pl_content .time{
		font-size: 20upx;
		color: #999999;
		margin-top: 24upx;
	}
	.pl_user_img{
		display: flex;
		align-items: center;
	}
	.pl_dz{
		margin-left: 25upx;
	}
	.pl_dianzan{
		/* display: flex; */
		/* align-items: center; */
	}
	.pl_user_img image{
		width: 56upx;
		height: 56upx;
		border-radius: 50%;
		border:1upx solid red;
		margin-right: 10upx;
	}
	.pl_user_info{
		display: flex;
		width: 100%;
		height: 80upx;
		justify-content: space-between;
		align-items: center;
	}
	.nei{
		width: 100%;
		box-sizing: border-box;
		padding: 30upx;
	}
	.nei .title{
		font-size: 32upx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #000000;
		line-height: 48upx;
	}
	.userinfo{
		width: 100%;
		height: 88upx;
		display: flex;
	}
	.userinfo .userinfo_img{
		width: 88upx;
		height: 88upx;
		border-radius: 50%;
		margin-right: 12upx;
	}
	.userinfo_img image{
		width: 1100%;
		height: 100%;
		border-radius: 50%;
	}
	.user_info{
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	.username{
		font-size: 28upx;
		color: #000000;
		font-weight: 700;
	}
	.user_time{
		font-size: 24upx;
		color: #666666;
	}
	.content{
		padding-top: 30upx;
		margin-top: 30upx;
		border-top: 1upx solid #F4F4F4;
		margin-bottom: 80upx;
	}
	.button{
		display: flex;
		position: fixed;
		bottom: 0;
		height: 150upx;
		width: 100%;
		align-items: center;
		box-sizing: border-box;
		left: 0;
        padding: 0 30upx;
		justify-content: space-between;
		background-color: #FFFFFF;
		border-top: 1upx solid #CCCCCC;
	}
	.button .input{
		width: 460upx;
		height: 56upx;
		border-radius: 28upx;
		background-color: #F6F6F6;
		display: flex;
		align-items: center;
	}
	.button .set_button{
		width: 260upx;
		display: flex;
		justify-content: space-between;
	}
	.button .set_button view{
		width: 80upx;
		height: 80upx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.xie{
		margin:0 24upx;
	}
	button::after {
	   border: none;
	}

	.fenxiang button{
		margin: 0 !important;
		padding: 0 !important;
		background-color: #FFFFFF;
		border: 0upx solid #FFFFFF !important;
		line-height:80upx;
		display: flex;
		align-items: center;
	}
</style>
